<template>
  <div class="add-reduce">
  <span class="display-flex">

    <span class="item display-flex justify-content-flex-center align-items-center" @click.stop="reduceFn">
      <img :src="getReduceBtn()" alt="">
      <!--mg v-if="newItem.num>0" src="../assets/img/customer/reduce_dis.png" alt="">-->
    </span>
    <span class="item display-flex justify-content-flex-center align-items-center"
          :style="(newItem.stockFlag&&(newItem.num>newItem.goodsStock))||newItem.sameGoodsStock==1?'color:red;':''" @click.stop="inputFn">{{newItem.num}}</span>
    <span class="item display-flex justify-content-flex-center align-items-center" @click.stop="addFn">
      <img src="../assets/img/customer/add.png" v-if="(!newItem.stockFlag||(newItem.num<newItem.goodsStock))&&newItem.sameGoodsStock!=1&&newItem.sameGoodsStock!=2" alt="">
      <img src="../assets/img/customer/add2.png" v-if="(newItem.stockFlag&&(newItem.num>=newItem.goodsStock))||newItem.sameGoodsStock==1||newItem.sameGoodsStock==2" alt="">
    </span>
  </span>

    <div v-transfer-dom>
      <confirm class="add-reduce-dialog" v-model="show"
               title='请输入商品数量'
               show-input
               ref="confirms"
               @on-cancel="onCancel"
               @on-confirm="onConfirm"
      >
      </confirm>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      goodId: Number | String,
      item: Object,
      useType: String
    },
    data() {
      return {
        newGoodId: '',
        newItem: this.item,
        show: false,
        hisNum:0
      }
    },
    created() {
    },
    watch: {
      goodId: function (newVal, oldVal) {
        this.goodId = newVal;
      },
      item: function (newVal, oldVal) {

        // console.log("==--==", oldVal)
        this.newItem = newVal;
      }
    },
    methods: {
      onCancel() {
        this.show = false;
      },
      onConfirm(e) {
        this.show = false;
        if (this.$checkIsNumber(e)) {
          if (e.length > 8) {
            this.$vux.toast.text("最多输入8位", 'center');
            return
          }
          this.hisNum=this.newItem.num;
          this.newItem.num = e;
          if (this.useType != 1) {
            this.setGoodNum();
          }
        } else {
          this.$vux.toast.text("请输入整数", 'center');
        }
      },
      reduceFn() {
        if (this.useType != 1) {
          this.hisNum=this.newItem.num;
          if (this.newItem.num > 1) {
            this.newItem.num = parseInt(this.newItem.num) - 1;
            this.setGoodNum();
          } else {
            this.$emit('deleteGood', this.item)
          }
          return;
        }

        if (this.newItem.num > 0) {
          this.newItem.num = parseInt(this.newItem.num) - 1;
          if (this.useType != 1) {
            this.setGoodNum();
          }
        }
      },
      addFn() {
        if((!this.newItem.stockFlag||(this.newItem.num<this.newItem.goodsStock))&&this.newItem.sameGoodsStock!=1&&this.newItem.sameGoodsStock!=2){
          this.hisNum=this.newItem.num;
          this.newItem.num = parseInt(this.newItem.num) + 1;
          if (this.useType != 1) {
            this.setGoodNum();
          }
        }
      },
      inputFn() {
        this.show = true;
        /*  this.$vux.confirm.show({
            title: '请输入商品数量',
            value: true,
            "showInput": true,
            "inputAttrs":{type:"number",useFlag:1},
            onCancel: () => {
            },
            onConfirm: (e) => {
              if(this.$checkIsNumber(e)){
                  this.newItem.num=e;
                  if(this.useType!=1){
                    this.setGoodNum();
                  }
              }else {
                this.$vux.toast.text("请输入整数", 'center');
              }
            }
          })*/
      },
      getReduceBtn() {
        return this.newItem.num > 0 ? require('../assets/img/customer/reduce.png') : require('../assets/img/customer/reduce_dis.png')
      },
      setGoodNum() {
        if (this.newItem.num >= 0) {
          let unitId = ''   //购物车传的参数是unitId，商品详情是id
          if (this.newItem.unitId) {
            unitId = this.newItem.unitId;
          } else {
            unitId = this.newItem.id
          }
          console.log('setGoodNum',this.newItem)
          this.$ajax.post("replenish/shopping_cart/setting", {
            goodsId: this.goodId,
            unitId: unitId,
            num: this.newItem.num
          }, (res) => {
            if (res.code == 200) {
              // console.log(this.newItem)
              this.$root.eventHub.$emit('updateCart')
              this.$emit('update',{data:res.data})
              this.$emit('updateStcok',{good:this.newItem})
            } else {
              // console.log(res)
              this.newItem.num = this.hisNum
              this.$vux.toast.text(res.msg, 'center');
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .add-reduce {
    .item {
      margin-left: .1rem;
      background: #FAFAFA;
      min-width: .66rem;
      height: .58rem;
      text-align: center;
      vertical-align: middle;

      img {
        width: .22rem;
        height: .22rem;
      }
    }
  }

  .weui-dialog /deep/ .weui-dialog__ft {
    a {
      background: none !important;
    }
  }
</style>
